import {
  IonContent,
  IonPage,
  IonLabel,
  IonHeader,
  IonToolbar,
  IonTitle,
  IonTabBar,
  IonTabButton,
  IonIcon,
  IonList,
  IonItem,
  IonRange,
  IonInput,
  IonCheckbox,
  IonRow,
  IonCol
} from '@ionic/react';
import React, { useState } from 'react';
import { home, person, help, logoBitcoin, timer, time, phonePortrait, addCircleOutline, removeCircleOutline, search, thumbsUp } from 'ionicons/icons';

const Home: React.FC = () => {
  const [range, setRange] = useState(0);

  return (
    <IonPage>
      <IonHeader>
        <IonToolbar color="dark">
          <IonTitle style={{ fontSize: '28px' }}>人人贷</IonTitle>
          <IonLabel style={{ fontSize: '12px', marginLeft: ' 5%' }}>最高借款额度(元)</IonLabel><br></br>
          <IonLabel style={{ fontSize: '36px', marginLeft: ' 5%', color: "orange" }}>300,000</IonLabel>
          <IonItem color="dark">
            <IonIcon icon={phonePortrait} style={{ height: '30%' }} />
            <IonLabel style={{ fontSize: '8px' }}>纯线上审批</IonLabel>
            <IonIcon icon={time} style={{ height: '30%' }} />
            <IonLabel style={{ fontSize: '8px' }}>最长借三年</IonLabel>
            <IonIcon icon={timer} style={{ height: '30%' }} />
            <IonLabel style={{ fontSize: '8px' }}>秒级放款</IonLabel>
          </IonItem>
        </IonToolbar>
      </IonHeader>

      <IonContent>
        <IonList>
          <IonList style={{ textAlign: 'center', height: '10%' }}>
            <IonLabel position="stacked">申请金额(元)</IonLabel>
            <IonInput type="number" readonly value={range + ".00"}></IonInput>
            <IonItem lines="none" style={{ marginTop: '-5%' }}>
              <IonRange min={100} max={3000000} step={100} value={range} onIonChange={e => setRange(parseInt(e.detail.value.toString())!)} color="warning">
                <IonIcon slot="start" icon={removeCircleOutline} color="warning"></IonIcon>
                <IonIcon slot="end" icon={addCircleOutline} color="warning"></IonIcon>
              </IonRange>
            </IonItem>
          </IonList>
          <IonItem lines="full" style={{ marginTop: '-5%' }}>
            <IonLabel style={{ color: 'gray', fontSize: '14px' }}>借款期限</IonLabel>
          </IonItem>
          <IonList style={{ fontSize: '12px' }}>
            <IonCheckbox style={{ height: '3.5%', width: '3.5%', marginRight: '2%', marginLeft: '5%' }} checked color="danger"></IonCheckbox>
            <IonLabel>同意</IonLabel>
            <IonLabel color="danger">《借款协议》《平台服务协议》</IonLabel>
          </IonList>
          <IonList>
            <IonTitle style={{ fontSize: '15px' }}>Q1 借款所需凭证</IonTitle>
            <IonTitle style={{ fontSize: '12px', color: 'grey' }}>本人身份证、银行卡（仅用于收款）、手机号码 </IonTitle>
          </IonList>
          <IonList>
            <IonTitle style={{ fontSize: '15px' }}>Q2 借款后，如何还款</IonTitle>
            <IonTitle style={{ fontSize: '12px', color: 'grey' }}>支持每月还款日自动扣款，您也可以通过APP进行手动还款</IonTitle>
          </IonList>
          <IonList style={{ textAlign: 'center', marginTop: "10%" }}>
            <IonRow>
              <IonCol>
                <IonIcon icon={phonePortrait} style={{ height: '140%', width: '100%' }} />
              </IonCol>
              <IonCol>
                <IonIcon icon={search} style={{ height: '140%', width: '100%' }} />
              </IonCol>
              <IonCol>
                <IonIcon icon={thumbsUp} style={{ height: '140%', width: '100%' }} />
              </IonCol>
            </IonRow>
            <IonRow>
              <IonCol>
                <IonLabel style={{ fontSize: '16px' }}>APP申请<br></br>大数据授信</IonLabel>
              </IonCol>
              <IonCol>
                <IonLabel style={{ fontSize: '16px' }}>极速审核<br></br>当天到账</IonLabel>
              </IonCol>
              <IonCol>
                <IonLabel style={{ fontSize: '16px' }}>借款灵活<br></br>还款无压力</IonLabel>
              </IonCol>
            </IonRow>
          </IonList>
          <IonList style={{ textAlign: 'center', fontSize: '10px', color: 'gray', marginTop: "40%" }}>
            <IonLabel >好用的金融平台<br></br>人人贷金融股份有限公司 渝ICP备14003138号</IonLabel>
          </IonList>
        </IonList>
      </IonContent>

      <IonTabBar>
        <IonTabButton selected={true} tab="Home" href="/Home">
          <IonIcon icon={home} />
          <IonLabel>首页</IonLabel>
        </IonTabButton>
        <IonTabButton selected={false} tab="" href="">
          <IonIcon icon={help} />
          <IonLabel>帮助</IonLabel>
        </IonTabButton>
        <IonTabButton tab="" href="">
          <IonIcon icon={logoBitcoin} />
          <IonLabel>账单</IonLabel>
        </IonTabButton>
        <IonTabButton tab="My" href="/My">
          <IonIcon icon={person} />
          <IonLabel>我的</IonLabel>
        </IonTabButton>
      </IonTabBar>
    </IonPage>
  );
};

export default Home;
